<template>
  <div class="page">
    <div class="page-header">
      <div class="header-content">
        <h1><i class="fas fa-users"></i> 人员信息管理</h1>
        <p>管理员、普通员工、安全员信息管理</p>
      </div>
      <div class="header-actions">
        <button class="btn btn-secondary" @click="showPersonalProfile = true">
          <i class="fas fa-user"></i> 个人信息
        </button>
        <button class="btn btn-primary" @click="loadUsersData" :disabled="isLoading">
          <i class="fas fa-sync-alt" :class="{ 'fa-spin': isLoading }"></i> 刷新数据
        </button>
      </div>
    </div>
    
    <!-- 统计卡片 -->
    <div class="stats-cards">
      <div class="stat-card">
        <div class="stat-icon admin">
          <i class="fas fa-user-shield"></i>
        </div>
        <div class="stat-content">
          <h3>{{ statistics.administrators_count || 0 }}</h3>
          <p>管理员</p>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon employee">
          <i class="fas fa-users"></i>
        </div>
        <div class="stat-content">
          <h3>{{ statistics.employees_count || 0 }}</h3>
          <p>普通员工</p>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon safety">
          <i class="fas fa-hard-hat"></i>
        </div>
        <div class="stat-content">
          <h3>{{ statistics.safety_officers_count || 0 }}</h3>
          <p>安全员</p>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon total">
          <i class="fas fa-user-friends"></i>
        </div>
        <div class="stat-content">
          <h3>{{ statistics.total_users || 0 }}</h3>
          <p>总人数</p>
        </div>
      </div>
    </div>
    
    <div class="user-controls">
      <div class="tab-controls">
        <button 
          class="tab-btn" 
          :class="{ active: activeTab === 'admin' }" 
          @click="switchTab('admin')"
          :disabled="isLoading"
        >
          <i class="fas fa-user-shield"></i>
          管理员
        </button>
        <button 
          class="tab-btn" 
          :class="{ active: activeTab === 'employee' }" 
          @click="switchTab('employee')"
          :disabled="isLoading"
        >
          <i class="fas fa-users"></i>
          普通员工
        </button>
        <button 
          class="tab-btn" 
          :class="{ active: activeTab === 'safety' }" 
          @click="switchTab('safety')"
          :disabled="isLoading"
        >
          <i class="fas fa-hard-hat"></i>
          安全员
        </button>
      </div>
      <button class="btn btn-success" @click="showAddUserModal" :disabled="isLoading">
        <i class="fas fa-plus"></i>
        添加{{ getTabName(activeTab) }}
      </button>
    </div>

    <!-- 管理员表格 -->
    <div v-if="activeTab === 'admin'" class="user-table">
      <div v-if="isLoading" class="loading-container">
        <div class="loading-spinner">
          <i class="fas fa-spinner fa-spin"></i>
          <p>加载中...</p>
        </div>
      </div>
      <div v-else-if="administrators.length === 0" class="empty-state">
        <div class="empty-icon">
          <i class="fas fa-user-slash"></i>
        </div>
        <h3>暂无管理员数据</h3>
        <p>点击上方按钮添加第一个管理员</p>
      </div>
      <div v-else class="table-wrapper">
        <table class="data-table">
          <thead>
            <tr>
              <th><i class="fas fa-id-card"></i> 管理员ID</th>
              <th><i class="fas fa-user"></i> 用户名</th>
              <th><i class="fas fa-user-tag"></i> 姓名</th>
              <th><i class="fas fa-mobile-alt"></i> 手机号</th>
              <th><i class="fas fa-envelope"></i> 邮箱</th>
              <th><i class="fas fa-clock"></i> 最后登录时间</th>
              <th><i class="fas fa-toggle-on"></i> 状态</th>
              <th><i class="fas fa-cogs"></i> 操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="admin in administrators" :key="admin.id" class="table-row">
              <td class="id-cell">{{ formatId(admin.id) }}</td>
              <td class="username-cell">{{ admin.username }}</td>
              <td class="name-cell">
                <div class="user-info">
                  <div class="avatar-placeholder">
                    {{ admin.name.charAt(0) }}
                  </div>
                  <span>{{ admin.name }}</span>
                </div>
              </td>
              <td class="contact-cell">{{ admin.phone }}</td>
              <td class="email-cell">{{ admin.email || '--' }}</td>
              <td class="time-cell">{{ admin.lastLoginTime }}</td>
              <td class="status-cell">
                <span class="status-badge" :class="admin.status === 'active' ? 'status-active' : 'status-inactive'">
                  <i class="fas" :class="admin.status === 'active' ? 'fa-check-circle' : 'fa-times-circle'"></i>
                  {{ admin.status === 'active' ? '启用' : '禁用' }}
                </span>
              </td>
              <td class="action-cell">
                <div class="action-buttons">
                  <button 
                    class="btn btn-sm btn-primary" 
                    @click="editUser(admin)" 
                    :disabled="isLoading"
                    title="编辑用户"
                  >
                    <i class="fas fa-edit"></i>
                  </button>
                  <button 
                    class="btn btn-sm" 
                    :class="admin.status === 'active' ? 'btn-warning' : 'btn-success'" 
                    @click="toggleUserStatus(admin)"
                    :disabled="isLoading"
                    :title="admin.status === 'active' ? '禁用用户' : '启用用户'"
                  >
                    <i class="fas" :class="admin.status === 'active' ? 'fa-ban' : 'fa-check'"></i>
                  </button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- 普通员工表格 -->
    <div v-if="activeTab === 'employee'" class="user-table">
      <div v-if="isLoading" class="loading-container">
        <div class="loading-spinner">
          <i class="fas fa-spinner fa-spin"></i>
          <p>加载中...</p>
        </div>
      </div>
      <div v-else-if="employees.length === 0" class="empty-state">
        <div class="empty-icon">
          <i class="fas fa-user-slash"></i>
        </div>
        <h3>暂无员工数据</h3>
        <p>点击上方按钮添加第一个员工</p>
      </div>
      <div v-else class="table-wrapper">
        <table class="data-table">
          <thead>
            <tr>
              <th><i class="fas fa-id-badge"></i> 员工编号</th>
              <th><i class="fas fa-user"></i> 姓名</th>
              <th><i class="fas fa-venus-mars"></i> 性别</th>
              <th><i class="fas fa-building"></i> 部门</th>
              <th><i class="fas fa-briefcase"></i> 岗位</th>
              <th><i class="fas fa-mobile-alt"></i> 联系方式</th>
              <th><i class="fas fa-tasks"></i> 整改任务数</th>
              <th><i class="fas fa-percentage"></i> 完成率</th>
              <th><i class="fas fa-award"></i> 考核结果</th>
              <th><i class="fas fa-cogs"></i> 操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="employee in employees" :key="employee.id" class="table-row">
              <td class="id-cell">{{ employee.employeeNumber }}</td>
              <td class="name-cell">
                <div class="user-info">
                  <div class="avatar-placeholder">
                    {{ employee.name.charAt(0) }}
                  </div>
                  <span>{{ employee.name }}</span>
                </div>
              </td>
              <td class="gender-cell">
                <i class="fas" :class="employee.gender === '男' ? 'fa-mars' : 'fa-venus'"></i>
                {{ employee.gender }}
              </td>
              <td class="dept-cell">{{ employee.department }}</td>
              <td class="pos-cell">{{ employee.position }}</td>
              <td class="contact-cell">{{ employee.contact }}</td>
              <td class="task-cell">
                <div class="task-info">
                  <span class="task-total">{{ employee.totalTasks }}</span>
                  <span class="task-completed">/{{ employee.completedTasks || 0 }}</span>
                </div>
              </td>
              <td class="rate-cell">
                <div class="progress-wrapper">
                  <div class="progress-bar">
                    <div class="progress-fill" :style="{ width: employee.completionRate + '%' }"></div>
                  </div>
                  <span class="progress-text">{{ employee.completionRate }}%</span>
                </div>
              </td>
              <td class="eval-cell">
                <span class="evaluation-badge" :class="getEvaluationClass(employee.evaluation)">
                  {{ employee.evaluation }}
                </span>
              </td>
              <td class="action-cell">
                <div class="action-buttons">
                  <button 
                    class="btn btn-sm btn-primary" 
                    @click="editUser(employee)" 
                    :disabled="isLoading"
                    title="编辑员工"
                  >
                    <i class="fas fa-edit"></i>
                  </button>
                  <button 
                    class="btn btn-sm btn-info" 
                    @click="viewDetails(employee)" 
                    :disabled="isLoading"
                    title="查看详情"
                  >
                    <i class="fas fa-eye"></i>
                  </button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- 安全员表格 -->
    <div v-if="activeTab === 'safety'" class="user-table">
      <div v-if="isLoading" class="loading-container">
        <div class="loading-spinner">
          <i class="fas fa-spinner fa-spin"></i>
          <p>加载中...</p>
        </div>
      </div>
      <div v-else-if="safetyOfficers.length === 0" class="empty-state">
        <div class="empty-icon">
          <i class="fas fa-hard-hat"></i>
        </div>
        <h3>暂无安全员数据</h3>
        <p>点击上方按钮添加第一个安全员</p>
      </div>
      <div v-else class="table-wrapper">
        <table class="data-table">
          <thead>
            <tr>
              <th><i class="fas fa-id-badge"></i> 安全员编号</th>
              <th><i class="fas fa-user"></i> 姓名</th>
              <th><i class="fas fa-venus-mars"></i> 性别</th>
              <th><i class="fas fa-building"></i> 部门</th>
              <th><i class="fas fa-certificate"></i> 资格证号</th>
              <th><i class="fas fa-map-marked-alt"></i> 管理范围</th>
              <th><i class="fas fa-search"></i> 排查任务数</th>
              <th><i class="fas fa-calendar-check"></i> 最近排查</th>
              <th><i class="fas fa-cogs"></i> 操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="safetyOfficer in safetyOfficers" :key="safetyOfficer.id" class="table-row">
              <td class="id-cell">{{ safetyOfficer.safetyNumber }}</td>
              <td class="name-cell">
                <div class="user-info">
                  <div class="avatar-placeholder safety">
                    {{ safetyOfficer.name.charAt(0) }}
                  </div>
                  <span>{{ safetyOfficer.name }}</span>
                </div>
              </td>
              <td class="gender-cell">
                <i class="fas" :class="safetyOfficer.gender === '男' ? 'fa-mars' : 'fa-venus'"></i>
                {{ safetyOfficer.gender }}
              </td>
              <td class="dept-cell">{{ safetyOfficer.department }}</td>
              <td class="license-cell">
                <div class="license-info">
                  <i class="fas fa-certificate text-warning"></i>
                  {{ safetyOfficer.licenseNumber }}
                </div>
              </td>
              <td class="scope-cell">{{ safetyOfficer.managementScope }}</td>
              <td class="task-cell">
                <span class="task-count">{{ safetyOfficer.inspectionTasks }}</span>
              </td>
              <td class="date-cell">
                <div class="date-info">
                  <i class="fas fa-calendar"></i>
                  {{ safetyOfficer.lastInspectionDate || '暂无' }}
                </div>
              </td>
              <td class="action-cell">
                <div class="action-buttons">
                  <button 
                    class="btn btn-sm btn-primary" 
                    @click="editUser(safetyOfficer)" 
                    :disabled="isLoading"
                    title="编辑安全员"
                  >
                    <i class="fas fa-edit"></i>
                  </button>
                  <button 
                    class="btn btn-sm btn-info" 
                    @click="viewDetails(safetyOfficer)" 
                    :disabled="isLoading"
                    title="查看详情"
                  >
                    <i class="fas fa-eye"></i>
                  </button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- 添加/编辑用户模态框 -->
    <div v-if="showModal" class="modal-overlay" @click="closeModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>{{ isEditing ? '编辑' : '添加' }}{{ getTabName(currentUserType) }}</h3>
          <button class="modal-close" @click="closeModal">&times;</button>
        </div>
        
        <div class="modal-body">
          <!-- 管理员表单 -->
          <form v-if="currentUserType === 'admin'" @submit.prevent="saveUser">
            <div class="form-grid">
              <div class="form-group">
                <label>用户名</label>
                <input type="text" v-model="currentUser.username" required>
              </div>
              <div class="form-group" v-if="!isEditing">
                <label>密码</label>
                <input type="password" v-model="currentUser.password" required>
              </div>
              <div class="form-group">
                <label>姓名</label>
                <input type="text" v-model="currentUser.name" required>
              </div>
              <div class="form-group">
                <label>手机号</label>
                <input type="tel" v-model="currentUser.phone" required>
              </div>
              <div class="form-group">
                <label>邮箱</label>
                <input type="email" v-model="currentUser.email">
              </div>
              <div class="form-group">
                <label>备注</label>
                <textarea v-model="currentUser.remarks" rows="3"></textarea>
              </div>
            </div>
          </form>

          <!-- 普通员工表单 -->
          <form v-if="currentUserType === 'employee'" @submit.prevent="saveUser">
            <div class="form-grid">
              <div class="form-group">
                <label>用户名 *</label>
                <input type="text" v-model="currentUser.username" required placeholder="用于登录系统">
              </div>
              <div class="form-group" v-if="!isEditing">
                <label>密码 *</label>
                <input type="password" v-model="currentUser.password" required placeholder="设置登录密码">
              </div>
              <div class="form-group">
                <label>姓名 *</label>
                <input type="text" v-model="currentUser.name" required>
              </div>
              <div class="form-group">
                <label>性别 *</label>
                <select v-model="currentUser.gender" required>
                  <option value="">请选择</option>
                  <option value="男">男</option>
                  <option value="女">女</option>
                </select>
              </div>
              <div class="form-group">
                <label>所属部门 *</label>
                <input type="text" v-model="currentUser.department" required>
              </div>
              <div class="form-group">
                <label>岗位 *</label>
                <input type="text" v-model="currentUser.position" required>
              </div>
              <div class="form-group">
                <label>联系方式</label>
                <input type="tel" v-model="currentUser.contact" placeholder="选填">
              </div>
              <div class="form-group">
                <label>入职日期 *</label>
                <input type="date" v-model="currentUser.hireDate" required>
              </div>
            </div>
          </form>

          <!-- 安全员表单 -->
          <form v-if="currentUserType === 'safety'" @submit.prevent="saveUser">
            <div class="form-grid">
              <div class="form-group">
                <label>用户名 *</label>
                <input type="text" v-model="currentUser.username" required placeholder="用于登录系统">
              </div>
              <div class="form-group" v-if="!isEditing">
                <label>密码 *</label>
                <input type="password" v-model="currentUser.password" required placeholder="设置登录密码">
              </div>
              <div class="form-group">
                <label>姓名 *</label>
                <input type="text" v-model="currentUser.name" required>
              </div>
              <div class="form-group">
                <label>性别 *</label>
                <select v-model="currentUser.gender" required>
                  <option value="">请选择</option>
                  <option value="男">男</option>
                  <option value="女">女</option>
                </select>
              </div>
              <div class="form-group">
                <label>所属部门 *</label>
                <input type="text" v-model="currentUser.department" required>
              </div>
              <div class="form-group">
                <label>岗位 *</label>
                <input type="text" v-model="currentUser.position" required>
              </div>
              <div class="form-group">
                <label>联系方式</label>
                <input type="tel" v-model="currentUser.contact" placeholder="选填">
              </div>
              <div class="form-group">
                <label>安全资格证号 *</label>
                <input type="text" v-model="currentUser.licenseNumber" required>
              </div>
              <div class="form-group">
                <label>管理范围 *</label>
                <input type="text" v-model="currentUser.managementScope" required>
              </div>
              <div class="form-group">
                <label>入职日期 *</label>
                <input type="date" v-model="currentUser.hireDate" required>
              </div>
            </div>
          </form>
        </div>
        
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" @click="closeModal">取消</button>
          <button type="submit" class="btn btn-primary" @click="saveUser" :disabled="isSaving">
            <i class="fas" :class="isSaving ? 'fa-spinner fa-spin' : 'fa-save'"></i>
            {{ isSaving ? '保存中...' : '保存' }}
          </button>
        </div>
      </div>
    </div>

    <!-- 个人信息管理页面 -->
    <div v-if="showPersonalProfile" class="modal-overlay" @click="showPersonalProfile = false">
      <div class="modal-content personal-profile-container" @click.stop>
        <div class="modal-header">
          <h3><i class="fas fa-user-edit"></i> 个人信息管理</h3>
          <button class="modal-close" @click="showPersonalProfile = false">&times;</button>
        </div>
        <div class="modal-body profile-modal-body">
          <PersonalProfile />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { api } from '../api/index'
import PersonalProfile from '../components/PersonalProfile.vue'

// 状态管理
const activeTab = ref('admin')
const showModal = ref(false)
const showPersonalProfile = ref(false)
const isEditing = ref(false)
const isLoading = ref(false)
const isSaving = ref(false)
const currentUserType = ref('admin')

// 统计数据
const statistics = ref({
  administrators_count: 0,
  employees_count: 0,
  safety_officers_count: 0,
  total_users: 0
})

// 数据
const administrators = ref([
  {
    id: 1,
    username: 'admin001',
    name: '张三',
    phone: '138****1234',
    email: 'admin@example.com',
    lastLoginTime: '2025-10-09 09:30',
    status: 'active',
    remarks: '系统管理员'
  }
])

const employees = ref([
  {
    id: 1,
    employeeNumber: 'EMP20251009-001',
    name: '李四',
    gender: '男',
    department: '安全部',
    position: '安全员',
    contact: '139****5678',
    hireDate: '2023-03-15',
    totalTasks: 15,
    completedTasks: 13,
    completionRate: 87,
    evaluation: '优',
    status: 'active'
  },
  {
    id: 2,
    employeeNumber: 'EMP20251009-002',
    name: '王五',
    gender: '男',
    department: '技术部',
    position: '技术员',
    contact: '137****9012',
    hireDate: '2022-08-20',
    totalTasks: 8,
    completedTasks: 7,
    completionRate: 88,
    evaluation: '良',
    status: 'active'
  }
])

const safetyOfficers = ref([
  {
    id: 1,
    safetyNumber: 'SAF20251009-001',
    name: '赵六',
    gender: '男',
    department: '安全部',
    position: '专职安全员',
    contact: '136****3456',
    licenseNumber: 'AQYG2023001',
    managementScope: '采掘一区',
    hireDate: '2023-01-10',
    inspectionTasks: 25,
    lastInspectionDate: '2025-10-09',
    status: 'active'
  }
])

const currentUser = reactive({})

const switchTab = (tab: string) => {
  activeTab.value = tab
}

const getTabName = (type: string) => {
  const names = {
    admin: '管理员',
    employee: '普通员工',
    safety: '安全员'
  }
  return names[type] || '用户'
}

const showAddUserModal = () => {
  isEditing.value = false
  currentUserType.value = activeTab.value
  Object.keys(currentUser).forEach(key => delete currentUser[key])
  showModal.value = true
}

const editUser = (user: any) => {
  isEditing.value = true
  currentUserType.value = activeTab.value
  Object.assign(currentUser, { ...user })
  showModal.value = true
}

const closeModal = () => {
  showModal.value = false
  Object.keys(currentUser).forEach(key => delete currentUser[key])
}

const saveUser = async () => {
  try {
    isSaving.value = true
    const userData = { ...currentUser, type: currentUserType.value }
    
    if (isEditing.value) {
      // 更新用户
      const response = await api.user.updateUser(currentUser.id, userData)
      if (response.status === 'success') {
        // 重新加载数据以确保同步
        await loadUsersData()
        closeModal()
        showNotification('用户更新成功！', 'success')
      } else {
        showNotification(response.message || '更新失败', 'error')
      }
    } else {
      // 创建新用户
      const response = await api.user.createUser(userData)
      if (response.status === 'success') {
        // 重新加载数据
        await loadUsersData()
        closeModal()
        showNotification('用户创建成功！', 'success')
      } else {
        showNotification(response.message || '创建失败', 'error')
      }
    }
  } catch (error) {
    console.error('保存用户失败:', error)
    showNotification('保存失败，请检查网络连接后重试', 'error')
  } finally {
    isSaving.value = false
  }
}

// 获取评价等级样式类
const getEvaluationClass = (evaluation: string) => {
  const classMap = {
    '优': 'eval-excellent',
    '良': 'eval-good', 
    '中': 'eval-average',
    '差': 'eval-poor',
    '待评价': 'eval-pending'
  }
  return classMap[evaluation] || 'eval-pending'
}

// 安全格式化ID显示
const formatId = (id: string | number | undefined | null) => {
  if (id === undefined || id === null) return '--'
  const idStr = String(id)
  if (idStr.length <= 8) return idStr
  return idStr.substring(0, 8) + '...'
}

const toggleUserStatus = (user: any) => {
  const newStatus = user.status === 'active' ? 'inactive' : 'active'
  user.status = newStatus
  alert(`用户状态已更新为：${newStatus === 'active' ? '启用' : '禁用'}`)
}

const viewDetails = (user: any) => {
  alert(`用户详情：\n姓名：${user.name}\n编号：${user.employeeNumber || user.safetyNumber}\n部门：${user.department}`)
}

const loadUsersData = async () => {
  try {
    isLoading.value = true
    
    // 分别加载用户数据和统计数据，避免一个失败影响另一个
    // 加载用户列表
    try {
      const usersResponse = await api.user.getAllUsers()
      if (usersResponse.status === 'success') {
        const data = usersResponse.data
        if (data.administrators) {
          administrators.value = data.administrators
        }
        if (data.employees) {
          employees.value = data.employees
        }
        if (data.safetyOfficers) {
          safetyOfficers.value = data.safetyOfficers
        }
      }
    } catch (error) {
      console.error('加载用户列表失败:', error)
      showNotification('加载用户列表失败', 'error')
    }
    
    // 加载统计数据（独立处理，不影响用户列表）
    try {
      const statsResponse = await api.user.getUserStatistics()
      if (statsResponse.status === 'success') {
        statistics.value = statsResponse.data
      } else {
        console.warn('获取统计数据失败:', statsResponse.message)
      }
    } catch (error) {
      console.error('加载统计数据失败:', error)
      // 统计数据失败不影响用户列表，只在控制台输出警告
    }
    
  } catch (error) {
    console.error('加载用户数据失败:', error)
    showNotification('加载用户数据失败，请重试', 'error')
  } finally {
    isLoading.value = false
  }
}

const showNotification = (message: string, type: 'success' | 'error' | 'warning' | 'info' = 'info') => {
  // 创建通知元素
  const notification = document.createElement('div')
  notification.className = `notification ${type}`
  notification.textContent = message
  
  // 设置样式
  const colors = {
    success: '#27ae60',
    error: '#e74c3c',
    warning: '#f39c12',
    info: '#3498db'
  }
  
  notification.style.cssText = `
    position: fixed;
    top: 90px;
    right: 20px;
    background: white;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    z-index: 1001;
    border-left: 4px solid ${colors[type]};
    animation: slideIn 0.3s ease;
    max-width: 300px;
    font-size: 14px;
  `
  
  document.body.appendChild(notification)
  
  // 3秒后自动移除
  setTimeout(() => {
    if (notification.parentNode) {
      notification.remove()
    }
  }, 3000)
}

onMounted(async () => {
  // 加载用户数据
  await loadUsersData()
})
</script>

<style scoped>
/* 页面头部样式 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding: 24px 30px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
}

.header-content h1 {
  margin: 0 0 8px 0;
  font-size: 28px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-content p {
  margin: 0;
  opacity: 0.9;
  font-size: 16px;
}

.header-actions {
  display: flex;
  gap: 12px;
}

/* 统计卡片样式 */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  border: 1px solid #f0f2f5;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 20px;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
}

.stat-icon.admin { background: linear-gradient(135deg, #667eea, #764ba2); }
.stat-icon.employee { background: linear-gradient(135deg, #f093fb, #f5576c); }
.stat-icon.safety { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.stat-icon.total { background: linear-gradient(135deg, #43e97b, #38f9d7); }

.stat-content h3 {
  margin: 0 0 8px 0;
  font-size: 32px;
  font-weight: 700;
  color: #2c3e50;
}

.stat-content p {
  margin: 0;
  color: #7f8c8d;
  font-size: 16px;
  font-weight: 500;
}

/* 用户控制区域样式 */
.user-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  padding: 20px 25px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.tab-controls {
  display: flex;
  gap: 8px;
}

.tab-btn {
  padding: 12px 20px;
  border: none;
  border-radius: 10px;
  background: #f8f9fa;
  color: #6c757d;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tab-btn:hover:not(:disabled) {
  background: #e9ecef;
  color: #495057;
}

.tab-btn.active {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.tab-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 表格样式 */
.user-table {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  border: 1px solid #f0f2f5;
}

.table-wrapper {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.data-table th {
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  color: #495057;
  font-weight: 600;
  padding: 18px 16px;
  text-align: left;
  border-bottom: 2px solid #dee2e6;
  white-space: nowrap;
}

.data-table th i {
  margin-right: 8px;
  color: #6c757d;
}

.table-row {
  transition: all 0.2s ease;
}

.table-row:hover {
  background: #f8f9fa;
}

.data-table td {
  padding: 16px;
  border-bottom: 1px solid #f0f2f5;
  vertical-align: middle;
}

/* 表格单元格特殊样式 */
.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar-placeholder {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
}

.avatar-placeholder.safety {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
}

.status-badge {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.status-active {
  background: #d4edda;
  color: #155724;
}

.status-inactive {
  background: #f8d7da;
  color: #721c24;
}

.evaluation-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.eval-excellent { background: #d4edda; color: #155724; }
.eval-good { background: #d1ecf1; color: #0c5460; }
.eval-average { background: #fff3cd; color: #856404; }
.eval-poor { background: #f8d7da; color: #721c24; }
.eval-pending { background: #e2e3e5; color: #495057; }

.progress-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.progress-bar {
  flex: 1;
  height: 8px;
  background: #e9ecef;
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  transition: width 0.3s ease;
}

.progress-text {
  font-weight: 600;
  color: #495057;
  min-width: 40px;
}

.task-info {
  display: flex;
  align-items: center;
  gap: 2px;
}

.task-total {
  font-weight: 600;
  color: #495057;
}

.task-completed {
  color: #6c757d;
  font-size: 12px;
}

.license-info, .date-info {
  display: flex;
  align-items: center;
  gap: 6px;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

/* 加载和空状态样式 */
.loading-container {
  padding: 80px 20px;
  text-align: center;
}

.loading-spinner {
  color: #667eea;
}

.loading-spinner i {
  font-size: 32px;
  margin-bottom: 16px;
}

.loading-spinner p {
  margin: 0;
  color: #6c757d;
  font-size: 16px;
}

.empty-state {
  padding: 80px 20px;
  text-align: center;
  color: #6c757d;
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 20px;
  opacity: 0.5;
}

.empty-state h3 {
  margin: 0 0 12px 0;
  font-size: 20px;
  color: #495057;
}

.empty-state p {
  margin: 0;
  font-size: 14px;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(3px);
}

.modal-content {
  background: white;
  border-radius: 20px;
  width: 90%;
  max-width: 700px;
  max-height: 85vh;
  overflow: hidden;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
  animation: modalSlideIn 0.3s ease-out;
}

.personal-profile-container {
  max-width: 90vw;
  width: 1200px;
  max-height: 95vh;
}

.profile-modal-body {
  padding: 0;
  max-height: 80vh;
  overflow-y: auto;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 30px;
  border-bottom: 1px solid #e9ecef;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
}

.modal-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal-close {
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.modal-body {
  padding: 30px;
  max-height: 60vh;
  overflow-y: auto;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px 30px;
  border-top: 1px solid #e9ecef;
  background: #f8f9fa;
}

/* 表单样式 */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  margin-bottom: 8px;
  font-weight: 600;
  color: #495057;
  font-size: 14px;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 12px 16px;
  border: 2px solid #e9ecef;
  border-radius: 10px;
  font-size: 14px;
  transition: all 0.3s ease;
  font-family: inherit;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-group textarea {
  resize: vertical;
  min-height: 80px;
}

/* Coming Soon 样式 */
.coming-soon {
  text-align: center;
  padding: 40px 20px;
}

.coming-soon-icon {
  font-size: 64px;
  color: #667eea;
  margin-bottom: 20px;
}

.coming-soon h3 {
  margin: 0 0 16px 0;
  color: #2c3e50;
  font-size: 24px;
}

.coming-soon p {
  margin: 0 0 20px 0;
  color: #6c757d;
  font-size: 16px;
}

.feature-list {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 12px;
  border-left: 4px solid #667eea;
  text-align: left;
  line-height: 1.8;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }
  
  .header-actions {
    justify-content: center;
  }
  
  .stats-cards {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
  
  .user-controls {
    flex-direction: column;
    gap: 15px;
  }
  
  .tab-controls {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .form-grid {
    grid-template-columns: 1fr;
  }
  
  .modal-content {
    width: 95%;
    max-height: 90vh;
  }
  
  .data-table {
    font-size: 12px;
  }
  
  .data-table th,
  .data-table td {
    padding: 12px 8px;
  }
  
  .user-info {
    flex-direction: column;
    gap: 8px;
  }
  
  .avatar-placeholder {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }
}

/* 工具类 */
.text-warning { color: #f39c12 !important; }
.text-success { color: #27ae60 !important; }
.text-danger { color: #e74c3c !important; }
.text-info { color: #3498db !important; }
</style>
